

<script setup>

//搜索-》用户

import { ref, VueElement } from "vue";
import store from "../store";

</script>

<script>
export default {
  data() {
    return {
      IStouch: "endtouch"
    };
  },
  methods: {
    starttouch(e) {
      e.currentTarget.className += " starttouch";
    },
    endtouch(e) {
      e.currentTarget.className = "touxiang";
    },
    skipToDetail(obj) {
      console.log(obj)
      window.localStorage.setItem("getmsg", JSON.stringify(obj))
      console.log(window.localStorage.getItem("getmsg"))
      window.location.replace("../detail-person/detail-person.html")
    },
    skipToOrgDetail(obj) {
      console.log(obj)
      window.localStorage.setItem("getmsg", JSON.stringify(obj))
      console.log(window.localStorage.getItem("getmsg"))
      window.location.replace("../detail-org/detail-org.html")
    }
  }
};

</script>



<template>
  <div class="main">
    <div class="touxiang" v-for="item in store.state.searchmsg.user.soilder" key="item" :class="IStouch"
      @touchstart="starttouch" @touchend="endtouch" @click="skipToDetail(item)">
      <img :src="item.profile" alt />
      <div class="nicheng">
        {{ item.nick }}
        <div class="zhenming">({{ item.name[0] }}*)</div>
      </div>
      <div class="leixing">退役大学生</div>
      <div class="div1"></div>
    </div>
    <div class="touxiang" v-for="item in store.state.searchmsg.user.stu" key="item" :class="IStouch"
      @touchstart="starttouch" @touchend="endtouch" @click="skipToDetail(item)">
      <img :src="item.profile" alt />
      <div class="nicheng">
        {{ item.nick }}
        <div class="zhenming">({{ item.name[0] }}*)</div>
      </div>
      <div class="leixing">在校大学生</div>
      <div class="div1"></div>
    </div>
    <div class="touxiang" v-for="item in store.state.searchmsg.user.org" :class="IStouch" @touchstart="starttouch"
      @touchend="endtouch"
      @click="skipToOrgDetail(item)">
      <img :src="item.profile" alt />
      <div class="nicheng">{{ item.orgName }}</div>
      <div class="leixing">军事社团</div>
      <div class="div1"></div>
    </div>
  </div>
</template>

<style scoped>
.main {
  position: relative;
  background-color: #fff;
  width: 100%;
  height: 100%;
}

.touxiang {
  position: relative;
  width: 100%;
  height: 90px;
  background-color: #fff;
  padding-left: 15px;
}

.touxiang>img {
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  left: 30px;
  top: calc(50% - 30px);
  box-shadow: 0 0 2px gray;
}

.div1 {
  position: absolute;
  width: 90.4%;
  height: 1px;
  background-color: #f2f2f2;
  left: calc(50% - 46.2%);
  top: 90px;
  z-index: 999;
}

.nicheng {
  position: absolute;
  left: 110px;
  top: 20px;
  font-size: 20px;
}

.zhenming {
  display: inline;
  color: gray;
  font-size: 16px;
}

.leixing {
  position: absolute;
  top: 52px;
  left: 110px;
  color: gray;
  font-size: 14px;
}

.starttouch {
  background-color: rgb(245, 246, 251);
}
</style>